<template>
  <div class="account-panel">
    <div class="account-panel__detail">
      <search-header enable-search title="选择用户" placeholder="输入手机号选择" @click="handleClickSelectUser" @search="handleSearch" v-model="searchVal"></search-header>
      <div class="account-panel__table">
        <el-form label-width="60px">
          <el-form-item label="姓名:">
            <span>王小胖</span>
          </el-form-item>
          <el-form-item label="电话:">
            <span>13588888888</span>
          </el-form-item>
          <el-form-item label="地址:">
            <span>浙江省杭州市西湖区</span>
          </el-form-item>
          <el-form-item label="余额:">
            <span>100.00元</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="good-panel__detail">
      <search-header title="已选择商品"></search-header>
      <el-table :data="data" style="width: 100%; margin-top: 10px;">
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="washType" label="洗衣类型"></el-table-column>
        <el-table-column prop="count" label="数量"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <select-user-dialog :visible.sync="visible"></select-user-dialog>
  </div>
</template>

<script>
import SearchHeader from '@/components/SearchHeader';
import SelectUserDialog from './SelectUserDialog';

export default {
  components: {
    SearchHeader,
    SelectUserDialog
  },
  data() {
    return {
      searchVal: '',
      data: [],
      visible: false
    };
  },
  methods: {
    handleSearch() {
      this.$message({ type: 'success', message: '搜索成功' });
    },
    handleClickSelectUser() {
      this.visible = true;
    }
  }
};
</script>

<style>

</style>
